<template>
<div v-if="visible">
  <el-dialog
    width="1500px"
    height="1000px"
    title="查看流程"
    class="design"
    :close-on-click-modal="false"
    v-model="visible" draggable>
    <el-container>
    <el-container>
  
      <el-main class="dmMain">
         <div class="canvas" ref="canvas"></div>
      </el-main>
    </el-container>
       
  </el-container>
  </el-dialog>
</div>

</template>

<script>
// 引入相关的依赖
// import BpmnJS from 'bpmn-js'
// import flowableModdleDescriptor from './flowable-bpmn-moddle/resources/flowable.json'
import BpmnJS from 'jeeplus-bpmn/lib/IViewer'
import taskService from '@/api/flowable/taskService'
export default {
  name: 'preview',
  data () {
    return {
      // bpmn建模器
      viewer: null,
      bpmnModeler: null,
      container: null,
      canvas: null,
      xmlStr: null,
      eventBus: null,
      processName: '',
      commandStack: null,
      modeling: null,
      elementRegistry: null,
      modelId: '',
      category: '',
      currentConfig: undefined,
      activities: [],
      currentNode: undefined,
      element: null,
      visible: false,
      key_in_database: null
    }
  },
  methods: {
    init (id, category) {
      this.element = null
      this.visible = true
      this.key_in_database = null
      if (category) {
        this.category = category
      } else {
        this.category = '未设置'
      }
      this.$nextTick(() => {
        this.createModel()
        if (id) {
          this.modelId = id
          taskService.getFlowChart(id).then((data) => {
            this.createNewDiagram(data)
          })
        }
      })
    },
    createModel () {
    // 获取到属性ref为“content”的dom节点
      this.container = this.$refs.content
    // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      this.viewer = new BpmnJS({
        container: canvas,
        additionalModules: [
        ]
      })
      this.elementRegistry = this.viewer.get('elementRegistry')
      this.modeling = this.viewer.get('modeling')
    },
    createNewDiagram (data) {
      let _this = this
      this.viewer.importXML(data.bpmnXml, function (err) {
        if (err) {
          console.error(err)
        } else {
          _this.viewer.get('canvas').zoom('fit-viewport')
          let last = data.activityIds.pop()
          var elementToColor = _this.elementRegistry.get(last)
          // this._commandStack.execute('element.setColor', {
          //   elements: elements,
          //   colors: colors
          // })
          if (!last.startsWith('EndEvent')) {
            _this.modeling.setColor([ elementToColor ], {
              'stroke': 'red',
              'stroke-width': '0.8px',
              'fill': 'white',
              'fill-opacity': '0.95'
            })
          } else {
            _this.modeling.setColor([ elementToColor ], {
              'stroke': 'rgb(64, 158, 255)',
              'stroke-width': '0.8px',
              'fill': 'white',
              'fill-opacity': '0.95'
            })
          }

        // Option 2: Color via BPMN 2.0 Extension
          data.activityIds.forEach((activity) => {
            var elementToColor = _this.elementRegistry.get(activity)
          // this._commandStack.execute('element.setColor', {
          //   elements: elements,
          //   colors: colors
          // })
            _this.modeling.setColor([ elementToColor ], {
              'stroke': 'rgb(64, 158, 255)',
              'stroke-width': '0.8px',
              'fill': 'white',
              'fill-opacity': '0.95'
            })
          })
          data.flows.forEach((activity) => {
            var elementToColor = _this.elementRegistry.get(activity)
          // this._commandStack.execute('element.setColor', {
          //   elements: elements,
          //   colors: colors
          // })
            _this.modeling.setColor([ elementToColor ], {
              'stroke': 'rgb(64, 158, 255)',
              'stroke-width': '0.9px',
              'fill': 'white',
              'fill-opacity': '0.95'
            })
          })
        }
      })
    }
  }
}
</script>


<style lang="less">
  /*左边工具栏以及编辑节点的样式*/
  @import 'bpmn-js/dist/assets/diagram-js.css';
  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  /*右边工具栏样式*/
  @import 'jp-bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';


  
  .dmMain {
    padding: 10px !important;
  }
  .canvas{
    width: 100%;
    height:700px;
  }

.design .el-dialog__body {
    padding: 0;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

  .font{
    padding: 0;
    outline: none;
    cursor: pointer;
    font-size: 22px;
    color: #555555;
    background: none;
    border: none;
  }
  .djs-container svg{
    left:80px
  }
  .djs-palette{
    left: 0px;
    top: 0px;
  }

  rect{
    position: absolute;
    background-color: #fff;
    border: #a8a8a8 solid 1px;
    border-radius: 10px;
    box-shadow: 2px 2px 19px #e0e0e0;
    margin: 0;
    padding-left: 48px;
    cursor: default;
    display: table;
  }

  // .panel{
  //   position: absolute;
  //   right: 0px;
  //   top: 0;
  //   width: 500px;
  // }
  .buttons{
    &>li{
      display:inline-block;margin: 0px;
      &>a{
        color: #999;
        background: #eee;
        cursor: not-allowed;
        padding: 8px;
        border: 1px solid #ccc;
        &.active{
          color: #333;
          background: #fff;
          cursor: pointer;
        }
      }
    }
  }


  .djs-drag-active.hover.new-parent, .djs-container svg{
    // background: unset !important;
    background: url("") repeat !important;
  }
  .djs-hit{
    // r: 8;
    fill: '270-#fff-#d7d7d7';
    stroke: '#ccc';
    stroke-width: 0.8;
    // stroke-width-active: 2;
    // 'stroke-active': '#0099cc';
  }

// circle, rect, polygon, g {
//     stroke: #b3d8ff !important;
//     cursor: default;
//     display: table;
// }
</style>
